<!--
/**
* Author: KSJ
* Date: 2022-11-17 08:56
* Desc: 
*/
-->
<!-- by your name -->
<template>
  <view class="bg">
    <view class="top" :style="{ zoom: zoom }">
      <zm-image
        src="/pick-top.png"
        is-join="true"
        width="675rpx"
        height="390rpx"
        mode="widthFix"
        custom-style="margin:0 auto;"
      ></zm-image>
      <view class="jump-btn tc" @click="goOtherMini"> 立即使用</view>
    </view>
    <view class="bottom" :style="{ zoom: zoom }">
      <view class="img-wrap">
        <zm-image
          src="/pick-bottom.png"
          is-join="true"
          width="726rpx"
          height="794rpx"
          mode="widthFix"
          custom-style="margin:0 auto;"
        ></zm-image>
        <view
          class="buy-btn"
          @click="goHome"
          :style="{ marginRight: right + 'rpx' }"
        ></view>
      </view>
    </view>

    <!-- <view class="buy-btn" @click="goHome"> 去购票</view> -->
  </view>
</template>

<script>
  import ZmImage from '@/commons/ZmImage'
  export default {
    name: '',
    data() {
      return {
        zoom: 1,
        right: 20,
        options: {}
      }
    },
    components: {
      ZmImage
    },
    onLoad(opt) {
      uni.getSystemInfo({
        success: (res) => {
          const height = res.windowHeight * 2
          const needZoom = height < 1440
          if (needZoom) {
            this.zoom = 0.8
            this.right = 120
          }
        }
      })
      const scene = decodeURIComponent(opt.scene).split('&')
      for (var i = 0; i < scene.length; i++) {
        var arr = scene[i].split('=')
        this.options[arr[0]] = arr[1]
      }

      // console.log(this.options)
      // machineId 是设备编号
      // containerNo 是柜门，单门柜可不传
    },
    methods: {
      goOtherMini() {
        // #ifdef MP-WEIXIN
        wx.navigateToMiniProgram({
          appId: 'wxf3d8a2894e70cf4b',
          path: `pages/machine-product/index?machineId=${this.options.machineId}&containerNo=${this.options.containerNo}`,
          extraData: {
            machineId: this.options.machineId,
            containerNo: this.options.containerNo
          },
          envVersion: 'release', // develop  release
          success(res) {
            console.log(res)
          },
          fail(err) {
            console.log(err)
          }
        })
        // #endif
      },
      goHome() {
        this.$tools.navigateTo('/pages/index/index', {}, 'reLaunch')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .bg {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/pick-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: left top;
    position: relative;
    background-color: #7cbbed;
    .top {
      width: 100%;
      height: 43%;
      padding-top: 75rpx;
      box-sizing: border-box;
    }
    .bottom {
      width: 100%;
      height: 57%;
      box-sizing: border-box;
    }
    .jump-btn {
      width: calc(100% - 80rpx);
      margin-left: 40rpx;
      margin-top: 50rpx;
      height: 88rpx;
      border-radius: 44rpx;
      padding: 0 40rpx;
      line-height: 88rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: #fff;
      color: #fff;
      background: linear-gradient(90deg, #4ec8f0 0%, #41dfd3 99%);
      box-sizing: border-box;
    }
    .img-wrap {
      position: relative;
    }
    .buy-btn {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 200rpx;
      height: 200rpx;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
    }
    // .buy-btn {
    //   position: absolute;
    //   background: #fff;
    //   color: #19a5c8;
    //   font-size: 36rpx;
    //   font-weight: bold;
    //   border-radius: 44rpx;
    //   height: 88rpx;
    //   left: 40rpx;
    //   right: 40rpx;
    //   width: calc(100% - 80rpx);
    //   bottom: 55rpx;
    //   text-align: center;
    //   line-height: 88rpx;
    // }
  }
</style>
